// 封装组件:获取验证图形码
import React, { Component } from "react";
// 导入axios
import axios from "axios";

class Captcha extends Component {
	constructor(props){
		super(props);
		this.state={
			img:"",
		}
	}
    render() {
        return (
			<div>
				{/* 让父组传递一个height*/}
				<img src={this.state.img} alt="Captcha" onClick={(e)=>this.loadCaptcha(e)}
				height={this.props.height}/>
			</div>
		);
    };
	
	componentDidMount(){
		this.loadCaptcha()
	}
	// 获取验证码方法
	loadCaptcha=()=>{
		// 服务端返回三个数据：
		// sensitive：对用户输入的验证码内容大小写是否敏感
		// key：与验证码对应的验证标识，在验证用户输入的时候需要回传给服务器
		// img：验证码对应的base64格式字符串，与正常的路径一样使用，将其给img标签的src属性即可
		
		// 请求图形验证码信息
		axios.get("https://reactapi.iynn.cn/captcha/api/math").then(ret=>{
			// console.log(ret.data)
			// 把img地址赋值给本地数据
			this.setState({
				img:ret.data.img
			});
			// 调用父组件的取值方法,主动把key传给父组件
			// 在父组件约定一个setKey(key),形参就是key
			// 子组件调用,把真实key传给父组
			this.props.setKey(ret.data.key);
		})
		// console.log(this.state.img)
	}
};

export default Captcha;